<template>
    <view>
        <view class="dz-from dz-from-t" v-show="isshow">
            <view class="dz-from-t-title">{{setInfo.detail.site_name}}</view>
            <view class="dz-from-top">
                <view class="dz-from-time">
                    <view class="iconfont icon-shijian"></view>
                    <view>巡检时间:</view>
                    <view class="shenpi-list-r">{{setInfo.detail.checktime}}</view>
                </view>
                <view class="dz-from-time">
                    <view class="iconfont icon-shijian"></view>
                    <view>开始时间:</view>
                    <view class="shenpi-list-r">{{setInfo.detail.begintime}}</view>
                </view>
                <view class="dz-from-time">
                    <view class="iconfont icon-shijian"></view>
                    <view>结束时间:</view>
                    <view class="shenpi-list-r">{{setInfo.detail.endtime}}</view>
                </view>
            </view>
        </view>
        <view class="dz-line" v-show="isshow && setInfo.detail.item.length > 0"></view>
        <view class="dz-from dz-from-column" v-show="isshow && setInfo.detail.item.length > 0">
            <view class="dz-jcx">
                <view>检查项</view>
                <view class="dz-from-jc">
                    <view>正常</view>
                    <view>异常</view>
                </view>
            </view>
            <view class="dz-jcx" v-for="(item,index) in setInfo.detail.item" :key="index">
                <view class="dz-jcx-l">
                    <view class="dz-jcx-no">{{index+1}}</view>
                    {{item.item_name}}
                </view>
                <radio-group v-if="item.type == 1" class="dz-from-jc" @change="radioChange">
                    <label class="uni-list-cell uni-list-cell-pd" v-for="(ite, ind) in item.check" :key="ite">
                        <view>
                            <radio disabled="true" :value="ite" :checked="(item.id+'_'+item.value) == ite"
                                   color="#4d72ff" style="transform:scale(0.85)"/>
                        </view>
                    </label>
                </radio-group>
                <textarea disabled="true" :value="item.status == 0 ? '' : item.value" auto-height="true"
                          class="dz-jcx-input" :id="index + '_' +item.id" v-if="item.type == 2" @blur="gettext"
                          type="text"/>
            </view>
        </view>
        <view class="dz-line" v-show="isshow" v-if="content != '' && content != undefined && content != null  || lastimgArr.length > 0"></view>
        <view class="dz-from-bz" v-show="isshow"
              v-if="content != '' && content != undefined && content != null  || lastimgArr.length > 0">
            <view>备注</view>
            <view class="dz-from-bz-text">
                <textarea v-if="content != '' && content != undefined && content != null" :value="content" auto-height/>
                <view class="dz-from-fj">
                    <view ref="input" class="input"></view>
                    <view class="dz-from-fj-edit" v-for="(item,index) in lastimgArr" :key="index" @tap="showPic(item,'image')">
                        <image :src="item" class="dz-from-fj-img-img"></image>
                        <view class="dz-from-jian">
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="dz-line" v-show="isshow"></view>
        <view class="dz-from" v-show="isshow">
            <view>巡检结果</view>
            <view class="dz-from-jc" style="width: 136px;">
                <radio-group class="dz-from-time dz-just" @change="radioResultChange">
                    <view class="dz-from-time">
                        <radio disabled="true" value="1" :checked="state == 1" color="#4d72ff"
                               style="transform:scale(0.85)"/>
                        <view>正常</view>
                    </view>
                    <view class="dz-from-time">
                        <radio disabled="true" value="2" :checked="state == 2" color="#4d72ff"
                               style="transform:scale(0.85)"/>
                        <view>异常</view>
                    </view>
                </radio-group>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex';
    import util from '@/lib/utils/index.js';

    export default {
        data() {
            return {
                id: 0,
                state: 0,//整个巡检点是否正常
                isshow: false,
                code: '',
                setInfo: {
                    requestParams: {
                        lng: '',//经度
                        lat: '',//纬度
                        site_id: 0,
                    },
                    detail: {}
                },
                content: '',
                lastimgArr: [],
                itemKey: [],
                itemValue: [],
                static_media: '',
            }
        },
        computed: {
            ...mapState([
                "userInfo"
            ]),
        },
        onLoad(ops) {
            this.static_media = this.$lib.$config.api
            if (ops.id) {
                this.id = ops.id
                this.setInfo.requestParams.site_id = ops.id
            }
        },
        onShow() {
            if (this.userInfo.token == undefined) {
                this.loginOut();
            } else {
                this.getSet()
            }
        },
        methods: {
            loginOut() {
                this.$lib.$store.commit('clearUserInfo')
                uni.reLaunch({
                    url: '/pages/login/index'
                })
            },
            getImg(data) {
                this.imgArr = data
                this.imgArr.push(...this.lastimgArr)
                // console.log(this.imgArr)
            },
            //获取巡检点信息
            async getSet() {
                // console.log('获取巡检点信息')
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.xunjianDetail,
                    data: {
                        id: this.setInfo.requestParams.site_id
                    },
                    needLogin: true
                })
                if (res.code == 1) {
                    this.isshow = true
                    this.lastimgArr = []
                    for (let i = 0, leng = res.data.item.length; i < leng; i++) {
                        this.$set(res.data.item[i], 'check', [res.data.item[i].id + '_2', res.data.item[i].id + '_1'])
                        this.itemValue.push('')
                        this.itemKey.push(res.data.item[i].id)
                    }
                    if (res.data.images) {
                        this.lastimgArr = res.data.images
                    }
                    this.setInfo.detail = res.data
                    this.setInfo.detail.checktime = util.timestampToTime(this.setInfo.detail.checktime);
                    this.setInfo.detail.begintime = this.formatTime(this.setInfo.detail.begintime)
                    this.setInfo.detail.endtime = this.formatTime(this.setInfo.detail.endtime)
                    this.state = res.data.state

                    this.content = this.setInfo.detail.content && this.setInfo.detail.content == null ? '' : this.setInfo.detail.content
                } else {
                    uni.showToast({
                        title: res.msg,
                        duration: 2000
                    });
                }
            },
            formatTime(time) {
                time = (time == 0) ? 0 : util.timestampToTime(time)
                return time
            },
            // 预览图片
            showPic(url,type,index){
                // this.$lib.$cache.setItem('previewImage', true);
                if(type == 'image'){
                    uni.previewImage({
                        indicator:"none",
                        current:url,
                        urls:this.lastimgArr
                    });
                }else if(type == 'check'){
                    uni.previewImage({
                        indicator:"none",
                        current:url,
                        urls: this.info.check[index].images
                    });
                }
            },
        }
    }
</script>

<style>
    page {
        background: #fff
    }

    .dz-from {
        display: flex;
        padding: 18px;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
    }

    .dz-from-t {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .dz-from-t-title {
        padding-bottom: 10px
    }

    .dz-from-top {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .dz-from-bz {
        display: flex;
        padding: 18px;
        width: 90%;
        margin: 0 auto;
        align-items: flex-start;
        flex-direction: column;
        font-size: 16px;
    }

    .dz-from-time {
        display: flex;
        align-items: center;
        font-size: 15px;
    }

    .dz-from-top .dz-from-time:first-child {
        margin-bottom: 3px;
    }

    .dz-from .iconfont {
        font-size: 18px;
        color: #8d8d8d;
        margin-right: 3px
    }

    .dz-line {
        background: #fafafa;
        height: 8px;
    }

    .dz-from-column {
        flex-direction: column;
    }

    .dz-from .dz-jcx {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex: 1;
        margin-bottom: 18px;
    }

    .dz-from .dz-jcx:last-child {
        margin-bottom: 0;
    }

    .dz-jcx-l {
        flex: 1;
        margin-right: 14px;
        width: 70%;
        display: flex;
        align-items: center;
    }

    .dz-jcx-input {
        display: block;
        font-size: 16px;
        line-height: 1.8em;
        height: 1.8em;
        min-height: 1.8em;
        overflow: hidden;
        width: 30%;
        padding: 5px 9px;
        border: solid 1px #d6d6d6;
    }

    .dz-from-jc {
        display: flex;
        justify-content: space-between;
        width: 100px;
    }

    .dz-from-button {
        margin: 18px;
    }

    .dz-from-bz-text {
        width: 100%;
        margin-top: 12px;
    }

    .dz-from-bz-text textarea {
	    padding: 12px 0;
	    width: 100%;
		font-size: 15px;
		min-height: 30px;
	}

    .dz-from-fj {
        display: flex;
        flex-wrap: wrap;
    }

    .dz-from-fj-edit {
        width: 80px;
        border: solid 1px #efefef;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 80px;
        color: #adadad;
        font-size: 14px;
        margin-right: 10px;
        justify-content: center;
        position: relative;
        margin-bottom: 10px
    }

    .dz-from-fj-edit .iconfont {
        font-size: 24px;
        margin-bottom: 1px
    }

    .dz-from-fj-img-img {
        width: 80px;
        height: 80px;
    }

    .dz-from-jian {
        position: absolute;
        right: 2px;
        top: 2px;
    }

    .dz-from-jian .iconfont {
        color: rgb(255, 255, 255);
        font-size: 11px;
        transform: rotate(45deg);
        border-radius: 50%;
        padding: 3px;
        background: rgb(68, 138, 255);
    }

    .shenpi-list-r {
        color: #9f9f9f;
        margin-left: 7px;
    }

    .dz-just {
        justify-content: space-between;
        width: 100%;
    }

    .dz-jcx-no {
        background: #4d72ff;
        color: #fff;
        font-size: 12px;
        width: 18px;
        height: 18px;
        border-radius: 2px;
        text-align: center;
        line-height: 18px;
        margin-right: 6px;
    }
</style>